<!DOCTYPE html><!--[if IE 8]><html lang="en" class="ie8"> <![endif]--><!--[if IE 9]><html lang="en" class="ie9"> <![endif]--><!--[if !IE]><!--><html lang="en"> <!--<![endif]--><!-- BEGIN HEAD --><head>    <meta charset="utf-8"/>    <title>Metronic | Form Stuff - Advance Form Samples</title>    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>    <meta content="" name="description"/>    <meta content="" name="author"/>    <!-- BEGIN GLOBAL MANDATORY STYLES -->    <link href="media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>    <link href="media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>    <link href="media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>    <link href="media/css/style-metro.css" rel="stylesheet" type="text/css"/>    <link href="media/css/style.css" rel="stylesheet" type="text/css"/>    <link href="media/css/style-responsive.css" rel="stylesheet" type="text/css"/>    <link href="media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>    <link href="media/css/uniform.default.css" rel="stylesheet" type="text/css"/>    <!-- END GLOBAL MANDATORY STYLES -->    <!-- BEGIN PAGE LEVEL STYLES -->    <link rel="stylesheet" type="text/css" href="media/css/select2_metro.css"/>    <!-- END PAGE LEVEL SCRIPTS -->    <link rel="shortcut icon" href="media/image/favicon.ico"/></head><!-- END HEAD --><!-- BEGIN BODY --><body class="page-header-fixed"><!-- BEGIN HEADER --><div class="header navbar navbar-inverse navbar-fixed-top"><!-- BEGIN TOP NAVIGATION BAR --><div class="navbar-inner"><div class="container-fluid"><!-- BEGIN LOGO --><a class="brand" href="index.html">    <img src="media/image/logo.png" alt="logo"/></a><!-- END LOGO --><!-- BEGIN RESPONSIVE MENU TOGGLER --><a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">    <img src="media/image/menu-toggler.png" alt=""/></a><!-- END RESPONSIVE MENU TOGGLER --><!-- BEGIN TOP NAVIGATION MENU --><ul class="nav pull-right"><!-- BEGIN NOTIFICATION DROPDOWN --><li class="dropdown" id="header_notification_bar">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">        <i class="icon-warning-sign"></i>        <span class="badge">6</span>    </a>    <ul class="dropdown-menu extended notification">        <li>            <p>You have 14 new notifications</p>        </li>        <li>            <a href="#">                <span class="label label-success"><i class="icon-plus"></i></span>                New user registered.                <span class="time">Just now</span>            </a>        </li>        <li>            <a href="#">                <span class="label label-important"><i class="icon-bolt"></i></span>                Server #12 overloaded.                <span class="time">15 mins</span>            </a>        </li>        <li>            <a href="#">                <span class="label label-warning"><i class="icon-bell"></i></span>                Server #2 not respoding.                <span class="time">22 mins</span>            </a>        </li>        <li>            <a href="#">                <span class="label label-info"><i class="icon-bullhorn"></i></span>                Application error.                <span class="time">40 mins</span>            </a>        </li>        <li>            <a href="#">                <span class="label label-important"><i class="icon-bolt"></i></span>                Database overloaded 68%.                <span class="time">2 hrs</span>            </a>        </li>        <li>            <a href="#">                <span class="label label-important"><i class="icon-bolt"></i></span>                2 user IP blocked.                <span class="time">5 hrs</span>            </a>        </li>        <li class="external">            <a href="#">See all notifications <i class="m-icon-swapright"></i></a>        </li>    </ul></li><!-- END NOTIFICATION DROPDOWN --><!-- BEGIN INBOX DROPDOWN --><li class="dropdown" id="header_inbox_bar">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">        <i class="icon-envelope"></i>        <span class="badge">5</span>    </a>    <ul class="dropdown-menu extended inbox">        <li>            <p>You have 12 new messages</p>        </li>        <li>            <a href="inbox.html?a=view">                <span class="photo"><img src="media/image/avatar2.jpg" alt=""/></span>								<span class="subject">								<span class="from">Lisa Wong</span>								<span class="time">Just Now</span>								</span>								<span class="message">								Vivamus sed auctor nibh congue nibh. auctor nibh								auctor nibh...								</span>            </a>        </li>        <li>            <a href="inbox.html?a=view">                <span class="photo"><img src="media/image/avatar3.jpg" alt=""/></span>								<span class="subject">								<span class="from">Richard Doe</span>								<span class="time">16 mins</span>								</span>								<span class="message">								Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh								auctor nibh...								</span>            </a>        </li>        <li>            <a href="inbox.html?a=view">                <span class="photo"><img src="media/image/avatar1.jpg" alt=""/></span>								<span class="subject">								<span class="from">Bob Nilson</span>								<span class="time">2 hrs</span>								</span>								<span class="message">								Vivamus sed nibh auctor nibh congue nibh. auctor nibh								auctor nibh...								</span>            </a>        </li>        <li class="external">            <a href="inbox.html">See all messages <i class="m-icon-swapright"></i></a>        </li>    </ul></li><!-- END INBOX DROPDOWN --><!-- BEGIN TODO DROPDOWN --><li class="dropdown" id="header_task_bar">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">        <i class="icon-tasks"></i>        <span class="badge">5</span>    </a>    <ul class="dropdown-menu extended tasks">        <li>            <p>You have 12 pending tasks</p>        </li>        <li>            <a href="#">								<span class="task">								<span class="desc">New release v1.2</span>								<span class="percent">30%</span>								</span>								<span class="progress progress-success ">								<span style="width: 30%;" class="bar"></span>								</span>            </a>        </li>        <li>            <a href="#">								<span class="task">								<span class="desc">Application deployment</span>								<span class="percent">65%</span>								</span>								<span class="progress progress-danger progress-striped active">								<span style="width: 65%;" class="bar"></span>								</span>            </a>        </li>        <li>            <a href="#">								<span class="task">								<span class="desc">Mobile app release</span>								<span class="percent">98%</span>								</span>								<span class="progress progress-success">								<span style="width: 98%;" class="bar"></span>								</span>            </a>        </li>        <li>            <a href="#">								<span class="task">								<span class="desc">Database migration</span>								<span class="percent">10%</span>								</span>								<span class="progress progress-warning progress-striped">								<span style="width: 10%;" class="bar"></span>								</span>            </a>        </li>        <li>            <a href="#">								<span class="task">								<span class="desc">Web server upgrade</span>								<span class="percent">58%</span>								</span>								<span class="progress progress-info">								<span style="width: 58%;" class="bar"></span>								</span>            </a>        </li>        <li>            <a href="#">								<span class="task">								<span class="desc">Mobile development</span>								<span class="percent">85%</span>								</span>								<span class="progress progress-success">								<span style="width: 85%;" class="bar"></span>								</span>            </a>        </li>        <li class="external">            <a href="#">See all tasks <i class="m-icon-swapright"></i></a>        </li>    </ul></li><!-- END TODO DROPDOWN --><!-- BEGIN USER LOGIN DROPDOWN --><li class="dropdown user">    <a href="#" class="dropdown-toggle" data-toggle="dropdown">        <img alt="" src="media/image/avatar1_small.jpg"/>        <span class="username">Bob Nilson</span>        <i class="icon-angle-down"></i>    </a>    <ul class="dropdown-menu">        <li><a href="extra_profile.html"><i class="icon-user"></i> My Profile</a></li>        <li><a href="page_calendar.html"><i class="icon-calendar"></i> My Calendar</a></li>        <li><a href="inbox.html"><i class="icon-envelope"></i> My Inbox(3)</a></li>        <li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li>        <li class="divider"></li>        <li><a href="extra_lock.html"><i class="icon-lock"></i> Lock Screen</a></li>        <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>    </ul></li><!-- END USER LOGIN DROPDOWN --></ul><!-- END TOP NAVIGATION MENU --></div></div><!-- END TOP NAVIGATION BAR --></div><!-- END HEADER --><!-- BEGIN CONTAINER --><div class="page-container row-fluid"><!-- BEGIN SIDEBAR --><div class="page-sidebar nav-collapse collapse"><!-- BEGIN SIDEBAR MENU --><ul class="page-sidebar-menu"><li>    <!-- BEGIN SIDEBAR TOGGLER BUTTON -->    <div class="sidebar-toggler hidden-phone"></div>    <!-- BEGIN SIDEBAR TOGGLER BUTTON --></li><li>    <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->    <form class="sidebar-search">        <div class="input-box">            <a href="javascript:;" class="remove"></a>            <input type="text" placeholder="Search..."/>            <input type="button" class="submit" value=" "/>        </div>    </form>    <!-- END RESPONSIVE QUICK SEARCH FORM --></li><li class="start ">    <a href="index.html">        <i class="icon-home"></i>        <span class="title">Dashboard</span>    </a></li><li class="">    <a href="javascript:;">        <i class="icon-cogs"></i>        <span class="title">Layouts</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="layout_horizontal_sidebar_menu.html">                Horzontal & Sidebar Menu</a>        </li>        <li>            <a href="layout_horizontal_menu1.html">                Horzontal Menu 1</a>        </li>        <li>            <a href="layout_horizontal_menu2.html">                Horzontal Menu 2</a>        </li>        <li>            <a href="layout_promo.html">                Promo Page</a>        </li>        <li>            <a href="layout_email.html">                Email Templates</a>        </li>        <li>            <a href="layout_ajax.html">                Content Loading via Ajax</a>        </li>        <li>            <a href="layout_sidebar_closed.html">                Sidebar Closed Page</a>        </li>        <li>            <a href="layout_blank_page.html">                Blank Page</a>        </li>        <li>            <a href="layout_boxed_page.html">                Boxed Page</a>        </li>        <li>            <a href="layout_boxed_not_responsive.html">                Non-Responsive Boxed Layout</a>        </li>    </ul></li><li class="">    <a href="javascript:;">        <i class="icon-bookmark-empty"></i>        <span class="title">UI Features</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="ui_general.html">                General</a>        </li>        <li>            <a href="ui_buttons.html">                Buttons</a>        </li>        <li>            <a href="ui_modals.html">                Enhanced Modals</a>        </li>        <li>            <a href="ui_tabs_accordions.html">                Tabs & Accordions</a>        </li>        <li>            <a href="ui_jqueryui.html">                jQuery UI Components</a>        </li>        <li>            <a href="ui_sliders.html">                Sliders</a>        </li>        <li>            <a href="ui_tiles.html">                Tiles</a>        </li>        <li>            <a href="ui_typography.html">                Typography</a>        </li>        <li>            <a href="ui_tree.html">                Tree View</a>        </li>        <li>            <a href="ui_nestable.html">                Nestable List</a>        </li>    </ul></li><li class="active ">    <a href="javascript:;">        <i class="icon-table"></i>        <span class="title">Form Stuff</span>        <span class="selected"></span>        <span class="arrow open"></span>    </a>    <ul class="sub-menu">        <li>            <a href="form_layout.html">                Form Layouts</a>        </li>        <li class="active">            <a href="form_samples.html">                Advance Form Samples</a>        </li>        <li>            <a href="form_component.html">                Form Components</a>        </li>        <li>            <a href="form_wizard.html">                Form Wizard</a>        </li>        <li>            <a href="form_validation.html">                Form Validation</a>        </li>        <li>            <a href="form_fileupload.html">                Multiple File Upload</a>        </li>        <li>            <a href="form_dropzone.html">                Dropzone File Upload</a>        </li>    </ul></li><li class="">    <a href="javascript:;">        <i class="icon-briefcase"></i>        <span class="title">Pages</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="page_timeline.html">                <i class="icon-time"></i>                Timeline</a>        </li>        <li>            <a href="page_coming_soon.html">                <i class="icon-cogs"></i>                Coming Soon</a>        </li>        <li>            <a href="page_blog.html">                <i class="icon-comments"></i>                Blog</a>        </li>        <li>            <a href="page_blog_item.html">                <i class="icon-font"></i>                Blog Post</a>        </li>        <li>            <a href="page_news.html">                <i class="icon-coffee"></i>                News</a>        </li>        <li>            <a href="page_news_item.html">                <i class="icon-bell"></i>                News View</a>        </li>        <li>            <a href="page_about.html">                <i class="icon-group"></i>                About Us</a>        </li>        <li>            <a href="page_contact.html">                <i class="icon-envelope-alt"></i>                Contact Us</a>        </li>        <li>            <a href="page_calendar.html">                <i class="icon-calendar"></i>                Calendar</a>        </li>    </ul></li><li class="">    <a href="javascript:;">        <i class="icon-gift"></i>        <span class="title">Extra</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="extra_profile.html">                User Profile</a>        </li>        <li>            <a href="extra_lock.html">                Lock Screen</a>        </li>        <li>            <a href="extra_faq.html">                FAQ</a>        </li>        <li>            <a href="inbox.html">                Inbox</a>        </li>        <li>            <a href="extra_search.html">                Search Results</a>        </li>        <li>            <a href="extra_invoice.html">                Invoice</a>        </li>        <li>            <a href="extra_pricing_table.html">                Pricing Tables</a>        </li>        <li>            <a href="extra_image_manager.html">                Image Manager</a>        </li>        <li>            <a href="extra_404_option1.html">                404 Page Option 1</a>        </li>        <li>            <a href="extra_404_option2.html">                404 Page Option 2</a>        </li>        <li>            <a href="extra_404_option3.html">                404 Page Option 3</a>        </li>        <li>            <a href="extra_500_option1.html">                500 Page Option 1</a>        </li>        <li>            <a href="extra_500_option2.html">                500 Page Option 2</a>        </li>    </ul></li><li>    <a class="active" href="javascript:;">        <i class="icon-sitemap"></i>        <span class="title">3 Level Menu</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="javascript:;">                Item 1                <span class="arrow"></span>            </a>            <ul class="sub-menu">                <li><a href="#">Sample Link 1</a></li>                <li><a href="#">Sample Link 2</a></li>                <li><a href="#">Sample Link 3</a></li>            </ul>        </li>        <li>            <a href="javascript:;">                Item 1                <span class="arrow"></span>            </a>            <ul class="sub-menu">                <li><a href="#">Sample Link 1</a></li>                <li><a href="#">Sample Link 1</a></li>                <li><a href="#">Sample Link 1</a></li>            </ul>        </li>        <li>            <a href="#">                Item 3            </a>        </li>    </ul></li><li>    <a href="javascript:;">        <i class="icon-folder-open"></i>        <span class="title">4 Level Menu</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="javascript:;">                <i class="icon-cogs"></i>                Item 1                <span class="arrow"></span>            </a>            <ul class="sub-menu">                <li>                    <a href="javascript:;">                        <i class="icon-user"></i>                        Sample Link 1                        <span class="arrow"></span>                    </a>                    <ul class="sub-menu">                        <li><a href="#"><i class="icon-remove"></i> Sample Link 1</a></li>                        <li><a href="#"><i class="icon-pencil"></i> Sample Link 1</a></li>                        <li><a href="#"><i class="icon-edit"></i> Sample Link 1</a></li>                    </ul>                </li>                <li><a href="#"><i class="icon-user"></i> Sample Link 1</a></li>                <li><a href="#"><i class="icon-external-link"></i> Sample Link 2</a></li>                <li><a href="#"><i class="icon-bell"></i> Sample Link 3</a></li>            </ul>        </li>        <li>            <a href="javascript:;">                <i class="icon-globe"></i>                Item 2                <span class="arrow"></span>            </a>            <ul class="sub-menu">                <li><a href="#"><i class="icon-user"></i> Sample Link 1</a></li>                <li><a href="#"><i class="icon-external-link"></i> Sample Link 1</a></li>                <li><a href="#"><i class="icon-bell"></i> Sample Link 1</a></li>            </ul>        </li>        <li>            <a href="#">                <i class="icon-folder-open"></i>                Item 3            </a>        </li>    </ul></li><li class="">    <a href="javascript:;">        <i class="icon-user"></i>        <span class="title">Login Options</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="login.html">                Login Form 1</a>        </li>        <li>            <a href="login_soft.html">                Login Form 2</a>        </li>    </ul></li><li class="">    <a href="javascript:;">        <i class="icon-th"></i>        <span class="title">Data Tables</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="table_basic.html">                Basic Tables</a>        </li>        <li>            <a href="table_responsive.html">                Responsive Tables</a>        </li>        <li>            <a href="table_managed.html">                Managed Tables</a>        </li>        <li>            <a href="table_editable.html">                Editable Tables</a>        </li>        <li>            <a href="table_advanced.html">                Advanced Tables</a>        </li>    </ul></li><li class="">    <a href="javascript:;">        <i class="icon-file-text"></i>        <span class="title">Portlets</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="portlet_general.html">                General Portlets</a>        </li>        <li>            <a href="portlet_draggable.html">                Draggable Portlets</a>        </li>    </ul></li><li class="">    <a href="javascript:;">        <i class="icon-map-marker"></i>        <span class="title">Maps</span>        <span class="arrow "></span>    </a>    <ul class="sub-menu">        <li>            <a href="maps_google.html">                Google Maps</a>        </li>        <li>            <a href="maps_vector.html">                Vector Maps</a>        </li>    </ul></li><li class="last ">    <a href="charts.html">        <i class="icon-bar-chart"></i>        <span class="title">Visual Charts</span>    </a></li></ul><!-- END SIDEBAR MENU --></div><!-- END SIDEBAR --><!-- BEGIN PAGE --><div class="page-content"><!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM--><div id="portlet-config" class="modal hide">    <div class="modal-header">        <button data-dismiss="modal" class="close" type="button"></button>        <h3>portlet Settings</h3>    </div>    <div class="modal-body">        <p>Here will be a configuration form</p>    </div></div><!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM--><!-- BEGIN PAGE CONTAINER--><div class="container-fluid"><!-- BEGIN PAGE HEADER--><div class="row-fluid">    <div class="span12">        <!-- BEGIN STYLE CUSTOMIZER -->        <div class="color-panel hidden-phone">            <div class="color-mode-icons icon-color"></div>            <div class="color-mode-icons icon-color-close"></div>            <div class="color-mode">                <p>THEME COLOR</p>                <ul class="inline">                    <li class="color-black current color-default" data-style="default"></li>                    <li class="color-blue" data-style="blue"></li>                    <li class="color-brown" data-style="brown"></li>                    <li class="color-purple" data-style="purple"></li>                    <li class="color-grey" data-style="grey"></li>                    <li class="color-white color-light" data-style="light"></li>                </ul>                <label>                    <span>Layout</span>                    <select class="layout-option m-wrap small">                        <option value="fluid" selected>Fluid</option>                        <option value="boxed">Boxed</option>                    </select>                </label>                <label>                    <span>Header</span>                    <select class="header-option m-wrap small">                        <option value="fixed" selected>Fixed</option>                        <option value="default">Default</option>                    </select>                </label>                <label>                    <span>Sidebar</span>                    <select class="sidebar-option m-wrap small">                        <option value="fixed">Fixed</option>                        <option value="default" selected>Default</option>                    </select>                </label>                <label>                    <span>Footer</span>                    <select class="footer-option m-wrap small">                        <option value="fixed">Fixed</option>                        <option value="default" selected>Default</option>                    </select>                </label>            </div>        </div>        <!-- END BEGIN STYLE CUSTOMIZER -->        <h3 class="page-title">            Advance Form Samples            <small>advance form layout samples</small>        </h3>        <ul class="breadcrumb">            <li>                <i class="icon-home"></i>                <a href="index.html">Home</a>                <span class="icon-angle-right"></span>            </li>            <li>                <a href="#">Form Stuff</a>                <span class="icon-angle-right"></span>            </li>            <li><a href="#">Form Layouts</a></li>        </ul>    </div></div><!-- END PAGE HEADER--><!-- BEGIN PAGE CONTENT--><div class="row-fluid"><div class="span12"><div class="tabbable tabbable-custom boxless"><ul class="nav nav-tabs">    <li class="active"><a href="#tab_1" data-toggle="tab">2 Columns</a></li>    <li><a class="" href="#tab_2" data-toggle="tab">2 Columns Horizontal</a></li>    <li><a href="#tab_3" data-toggle="tab">2 Columns View Only</a></li>    <li><a class="" href="#tab_4" data-toggle="tab">Row Seperated</a></li>    <li><a class="" href="#tab_5" data-toggle="tab">Bordered</a></li>    <li><a class="" href="#tab_6" data-toggle="tab">Bordered & Row Stripped</a></li>    <li><a class="" href="#tab_7" data-toggle="tab">Bordered & Label Stripped</a></li></ul><div class="tab-content"><div class="tab-pane active" id="tab_1"><div class="portlet box blue"><div class="portlet-title">    <div class="caption"><i class="icon-reorder"></i>Form Sample</div>    <div class="tools">        <a href="javascript:;" class="collapse"></a>        <a href="#portlet-config" data-toggle="modal" class="config"></a>        <a href="javascript:;" class="reload"></a>        <a href="javascript:;" class="remove"></a>    </div></div><div class="portlet-body form"><!-- BEGIN FORM--><form action="#" class="horizontal-form"><h3 class="form-section">Person Info</h3><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label" for="firstName">First Name</label>            <div class="controls">                <input type="text" id="firstName" class="m-wrap span12" placeholder="Chee Kin">                <span class="help-block">This is inline help</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group error">            <label class="control-label" for="lastName">Last Name</label>            <div class="controls">                <input type="text" id="lastName" class="m-wrap span12" placeholder="Lim">                <span class="help-block">This field has error.</span>            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Gender</label>            <div class="controls">                <select class="m-wrap span12">                    <option value="">Male</option>                    <option value="">Female</option>                </select>                <span class="help-block">Select your gender.</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Date of Birth</label>            <div class="controls">                <input type="text" class="m-wrap span12" placeholder="dd/mm/yyyy">            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Category</label>            <div class="controls">                <select class="span12 select2_category" data-placeholder="Choose a Category" tabindex="1">                    <option value=""></option>                    <option value="Category 1">Category 1</option>                    <option value="Category 2">Category 2</option>                    <option value="Category 3">Category 5</option>                    <option value="Category 4">Category 4</option>                </select>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Membership</label>            <div class="controls">                <label class="radio">                    <input type="radio" name="optionsRadios2" value="option1"/>                    Free                </label>                <label class="radio">                    <input type="radio" name="optionsRadios2" value="option2" checked/>                    Professional                </label>            </div>        </div>    </div>    <!--/span--></div><!--/row--><h3 class="form-section">Address</h3><div class="row-fluid">    <div class="span12 ">        <div class="control-group">            <label class="control-label">Street</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div></div><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">City</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">State</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Post Code</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Country</label>            <div class="controls">                <select class="m-wrap span12"></select>            </div>        </div>    </div>    <!--/span--></div><div class="form-actions">    <button type="submit" class="btn blue"><i class="icon-ok"></i> Save</button>    <button type="button" class="btn">Cancel</button></div></form><!-- END FORM--></div></div></div><div class="tab-pane " id="tab_2"><div class="portlet box green"><div class="portlet-title">    <div class="caption"><i class="icon-reorder"></i>Form Sample</div>    <div class="tools">        <a href="javascript:;" class="collapse"></a>        <a href="#portlet-config" data-toggle="modal" class="config"></a>        <a href="javascript:;" class="reload"></a>        <a href="javascript:;" class="remove"></a>    </div></div><div class="portlet-body form"><!-- BEGIN FORM--><form action="#" class="form-horizontal"><h3 class="form-section">Person Info</h3><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">First Name</label>            <div class="controls">                <input type="text" class="m-wrap span12" placeholder="Chee Kin">                <span class="help-block">This is inline help</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group error">            <label class="control-label">Last Name</label>            <div class="controls">                <input type="text" class="m-wrap span12" placeholder="Lim">                <span class="help-block">This field has error.</span>            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Gender</label>            <div class="controls">                <select class="m-wrap span12">                    <option value="">Male</option>                    <option value="">Female</option>                </select>                <span class="help-block">Select your gender.</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Date of Birth</label>            <div class="controls">                <input type="text" class="m-wrap span12" placeholder="dd/mm/yyyy">            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Category</label>            <div class="controls">                <select class="span12 select2_category" data-placeholder="Choose a Category" tabindex="1">                    <option value=""></option>                    <option value="Category 1">Category 1</option>                    <option value="Category 2">Category 2</option>                    <option value="Category 3">Category 5</option>                    <option value="Category 4">Category 4</option>                </select>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Membership</label>            <div class="controls">                <label class="radio">                    <input type="radio" name="optionsRadios2" value="option1"/>                    Free                </label>                <label class="radio">                    <input type="radio" name="optionsRadios2" value="option2" checked/>                    Professional                </label>            </div>        </div>    </div>    <!--/span--></div><h3 class="form-section">Address</h3><!--/row--><div class="row-fluid">    <div class="span12 ">        <div class="control-group">            <label class="control-label">Street</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div></div><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">City</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">State</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Post Code</label>            <div class="controls">                <input type="text" class="m-wrap span12">            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Country</label>            <div class="controls">                <select class="m-wrap span12">                    <option>Country 1</option>                    <option>Country 2</option>                </select>            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="form-actions">    <button type="submit" class="btn blue"><i class="icon-ok"></i> Save</button>    <button type="button" class="btn">Cancel</button></div></form><!-- END FORM--></div></div></div><div class="tab-pane " id="tab_3"><div class="portlet box blue"><div class="portlet-title">    <div class="caption"><i class="icon-reorder"></i>Form Sample</div>    <div class="tools">        <a href="javascript:;" class="collapse"></a>        <a href="#portlet-config" data-toggle="modal" class="config"></a>        <a href="javascript:;" class="reload"></a>        <a href="javascript:;" class="remove"></a>    </div></div><div class="portlet-body form"><!-- BEGIN FORM--><div class="form-horizontal form-view"><h3> View User Info - Bob Nilson </h3><h3 class="form-section">Person Info</h3><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label" for="firstName">First Name:</label>            <div class="controls">                <span class="text">Bob</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label" for="lastName">Last Name:</label>            <div class="controls">                <span class="text">Nilson</span>            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Gender:</label>            <div class="controls">                <span class="text">Male</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Date of Birth:</label>            <div class="controls">                <span class="text bold">20.01.1984</span>            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Category:</label>            <div class="controls">                <span class="text bold">Category1</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Membership:</label>            <div class="controls">                <span class="text bold">Free</span>            </div>        </div>    </div>    <!--/span--></div><!--/row--><h3 class="form-section">Address</h3><div class="row-fluid">    <div class="span12 ">        <div class="control-group">            <label class="control-label">Street:</label>            <div class="controls">                <span class="text">#24 Sun Park Avenue, Rolton Str</span>            </div>        </div>    </div></div><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">City:</label>            <div class="controls">                <span class="text">New York</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6">        <div class="control-group">            <label class="control-label">State:</label>            <div class="controls">                <span class="text">New York</span>            </div>        </div>    </div>    <!--/span--></div><!--/row--><div class="row-fluid">    <div class="span6 ">        <div class="control-group">            <label class="control-label">Post Code:</label>            <div class="controls">                <span class="text">457890</span>            </div>        </div>    </div>    <!--/span-->    <div class="span6 ">        <div class="control-group">            <label class="control-label">Country:</label>            <div class="controls">                <span class="text">USA</span>            </div>        </div>    </div>    <!--/span--></div><div class="form-actions">    <button type="submit" class="btn blue"><i class="icon-pencil"></i> Edit</button>    <button type="button" class="btn">Back</button></div></div><!-- END FORM--></div></div></div><div class="tab-pane" id="tab_4"><div class="portlet box blue"><div class="portlet-title">    <div class="caption"><i class="icon-reorder"></i>Form Sample</div>    <div class="tools">        <a href="javascript:;" class="collapse"></a>        <a href="#portlet-config" data-toggle="modal" class="config"></a>        <a href="javascript:;" class="reload"></a>        <a href="javascript:;" class="remove"></a>    </div></div><div class="portlet-body form"><!-- BEGIN FORM--><form action="#" class="form-horizontal form-row-seperated"><div class="control-group">    <label class="control-label">First Name</label>    <div class="controls">        <input type="text" placeholder="small" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Last Name</label>    <div class="controls">        <input type="text" placeholder="medium" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Gender</label>    <div class="controls">        <select class="m-wrap span12">            <option value="">Male</option>            <option value="">Female</option>        </select>        <span class="help-block">Select your gender.</span>    </div></div><div class="control-group">    <label class="control-label">Date of Birth</label>    <div class="controls">        <input type="text" class="m-wrap span12" placeholder="dd/mm/yyyy">    </div></div><div class="control-group">    <label class="control-label">Category</label>    <div class="controls">        <div class="select2-wrapper">            <select class="span12 select2_category">                <option value=""></option>                <option value="Category 1">Category 1</option>                <option value="Category 2">Category 2</option>                <option value="Category 3">Category 5</option>                <option value="Category 4">Category 4</option>            </select>        </div>    </div></div><div class="control-group">    <label class="control-label">Multi-Value Select</label>    <div class="controls">        <select class="span12 select2_sample1" multiple>            <option value=""></option>            <optgroup label="NFC EAST">                <option>Dallas Cowboys</option>                <option>New York Giants</option>                <option>Philadelphia Eagles</option>                <option>Washington Redskins</option>            </optgroup>            <optgroup label="NFC NORTH">                <option>Chicago Bears</option>                <option>Detroit Lions</option>                <option>Green Bay Packers</option>                <option>Minnesota Vikings</option>            </optgroup>            <optgroup label="NFC SOUTH">                <option>Atlanta Falcons</option>                <option>Carolina Panthers</option>                <option>New Orleans Saints</option>                <option>Tampa Bay Buccaneers</option>            </optgroup>            <optgroup label="NFC WEST">                <option>Arizona Cardinals</option>                <option>St. Louis Rams</option>                <option>San Francisco 49ers</option>                <option>Seattle Seahawks</option>            </optgroup>            <optgroup label="AFC EAST">                <option>Buffalo Bills</option>                <option>Miami Dolphins</option>                <option>New England Patriots</option>                <option>New York Jets</option>            </optgroup>            <optgroup label="AFC NORTH">                <option>Baltimore Ravens</option>                <option>Cincinnati Bengals</option>                <option>Cleveland Browns</option>                <option>Pittsburgh Steelers</option>            </optgroup>            <optgroup label="AFC SOUTH">                <option>Houston Texans</option>                <option>Indianapolis Colts</option>                <option>Jacksonville Jaguars</option>                <option>Tennessee Titans</option>            </optgroup>            <optgroup label="AFC WEST">                <option>Denver Broncos</option>                <option>Kansas City Chiefs</option>                <option>Oakland Raiders</option>                <option>San Diego Chargers</option>            </optgroup>        </select>    </div></div><div class="control-group">    <label class="control-label">Loading Data</label>    <div class="controls">        <input type="hidden" class="span12 select2_sample2">    </div></div><div class="control-group">    <label class="control-label">Tags Support List</label>    <div class="controls">        <input type="hidden" class="span12 select2_sample3" value="red, blue">    </div></div><div class="control-group">    <label class="control-label">Membership</label>    <div class="controls">        <label class="radio">            <input type="radio" name="optionsRadios2" value="option1"/>            Free        </label>        <label class="radio">            <input type="radio" name="optionsRadios2" value="option2" checked/>            Professional        </label>    </div></div><div class="control-group">    <label class="control-label">Street</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">City</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">State</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">Post Code</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group last">    <label class="control-label">Country</label>    <div class="controls">        <select class="m-wrap span12"></select>    </div></div><div class="form-actions">    <button type="submit" class="btn blue"><i class="icon-ok"></i> Save</button>    <button type="button" class="btn">Cancel</button></div></form><!-- END FORM--></div></div></div><div class="tab-pane" id="tab_5"><div class="portlet box blue "><div class="portlet-title">    <div class="caption"><i class="icon-reorder"></i>Form Sample</div>    <div class="tools">        <a href="javascript:;" class="collapse"></a>        <a href="#portlet-config" data-toggle="modal" class="config"></a>        <a href="javascript:;" class="reload"></a>        <a href="javascript:;" class="remove"></a>    </div></div><div class="portlet-body form"><!-- BEGIN FORM--><form action="#" class="form-horizontal form-bordered"><div class="control-group">    <label class="control-label">First Name</label>    <div class="controls">        <input type="text" placeholder="small" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Last Name</label>    <div class="controls">        <input type="text" placeholder="medium" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Gender</label>    <div class="controls">        <select class="m-wrap span12">            <option value="">Male</option>            <option value="">Female</option>        </select>        <span class="help-block">Select your gender.</span>    </div></div><div class="control-group">    <label class="control-label">Date of Birth</label>    <div class="controls">        <input type="text" class="m-wrap span12" placeholder="dd/mm/yyyy">    </div></div><div class="control-group">    <label class="control-label">Category</label>    <div class="controls">        <div class="select2-wrapper">            <select class="span12 select2_category">                <option value=""></option>                <option value="Category 1">Category 1</option>                <option value="Category 2">Category 2</option>                <option value="Category 3">Category 5</option>                <option value="Category 4">Category 4</option>            </select>        </div>    </div></div><div class="control-group">    <label class="control-label">Multi-Value Select</label>    <div class="controls">        <div class="select2-wrapper">            <select class="span12 select2_sample1" multiple>                <option value=""></option>                <optgroup label="NFC EAST">                    <option>Dallas Cowboys</option>                    <option>New York Giants</option>                    <option>Philadelphia Eagles</option>                    <option>Washington Redskins</option>                </optgroup>                <optgroup label="NFC NORTH">                    <option>Chicago Bears</option>                    <option>Detroit Lions</option>                    <option>Green Bay Packers</option>                    <option>Minnesota Vikings</option>                </optgroup>                <optgroup label="NFC SOUTH">                    <option>Atlanta Falcons</option>                    <option>Carolina Panthers</option>                    <option>New Orleans Saints</option>                    <option>Tampa Bay Buccaneers</option>                </optgroup>                <optgroup label="NFC WEST">                    <option>Arizona Cardinals</option>                    <option>St. Louis Rams</option>                    <option>San Francisco 49ers</option>                    <option>Seattle Seahawks</option>                </optgroup>                <optgroup label="AFC EAST">                    <option>Buffalo Bills</option>                    <option>Miami Dolphins</option>                    <option>New England Patriots</option>                    <option>New York Jets</option>                </optgroup>                <optgroup label="AFC NORTH">                    <option>Baltimore Ravens</option>                    <option>Cincinnati Bengals</option>                    <option>Cleveland Browns</option>                    <option>Pittsburgh Steelers</option>                </optgroup>                <optgroup label="AFC SOUTH">                    <option>Houston Texans</option>                    <option>Indianapolis Colts</option>                    <option>Jacksonville Jaguars</option>                    <option>Tennessee Titans</option>                </optgroup>                <optgroup label="AFC WEST">                    <option>Denver Broncos</option>                    <option>Kansas City Chiefs</option>                    <option>Oakland Raiders</option>                    <option>San Diego Chargers</option>                </optgroup>            </select>        </div>    </div></div><div class="control-group">    <label class="control-label">Loading Data</label>    <div class="controls">        <div class="select2-wrapper">            <input type="hidden" class="span12 select2_sample2">        </div>    </div></div><div class="control-group">    <label class="control-label">Tags Support List</label>    <div class="controls">        <div class="select2-wrapper">            <input type="hidden" class="span12 select2_sample3" value="red, blue">        </div>    </div></div><div class="control-group">    <label class="control-label">Membership</label>    <div class="controls">        <label class="radio">            <input type="radio" name="optionsRadios2" value="option1"/>            Free        </label>        <label class="radio">            <input type="radio" name="optionsRadios2" value="option2" checked/>            Professional        </label>    </div></div><div class="control-group">    <label class="control-label">Street</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">City</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">State</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">Post Code</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group last">    <label class="control-label">Country</label>    <div class="controls">        <select class="m-wrap span12"></select>    </div></div><div class="form-actions">    <button type="submit" class="btn blue"><i class="icon-ok"></i> Save</button>    <button type="button" class="btn">Cancel</button></div></form><!-- END FORM--></div></div></div><div class="tab-pane" id="tab_6"><div class="portlet box blue "><div class="portlet-title">    <div class="caption"><i class="icon-reorder"></i>Form Sample</div>    <div class="tools">        <a href="javascript:;" class="collapse"></a>        <a href="#portlet-config" data-toggle="modal" class="config"></a>        <a href="javascript:;" class="reload"></a>        <a href="javascript:;" class="remove"></a>    </div></div><div class="portlet-body form"><!-- BEGIN FORM--><form action="#" class="form-horizontal form-bordered form-row-stripped"><div class="control-group">    <label class="control-label">First Name</label>    <div class="controls">        <input type="text" placeholder="small" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Last Name</label>    <div class="controls">        <input type="text" placeholder="medium" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Gender</label>    <div class="controls">        <select class="m-wrap span12">            <option value="">Male</option>            <option value="">Female</option>        </select>        <span class="help-block">Select your gender.</span>    </div></div><div class="control-group">    <label class="control-label">Date of Birth</label>    <div class="controls">        <input type="text" class="m-wrap span12" placeholder="dd/mm/yyyy">    </div></div><div class="control-group">    <label class="control-label">Category</label>    <div class="controls">        <div class="select2-wrapper">            <select class="span12 select2_category">                <option value=""></option>                <option value="Category 1">Category 1</option>                <option value="Category 2">Category 2</option>                <option value="Category 3">Category 5</option>                <option value="Category 4">Category 4</option>            </select>        </div>    </div></div><div class="control-group">    <label class="control-label">Multi-Value Select</label>    <div class="controls">        <div class="select2-wrapper">            <select class="span12 select2_sample1" multiple>                <option value=""></option>                <optgroup label="NFC EAST">                    <option>Dallas Cowboys</option>                    <option>New York Giants</option>                    <option>Philadelphia Eagles</option>                    <option>Washington Redskins</option>                </optgroup>                <optgroup label="NFC NORTH">                    <option>Chicago Bears</option>                    <option>Detroit Lions</option>                    <option>Green Bay Packers</option>                    <option>Minnesota Vikings</option>                </optgroup>                <optgroup label="NFC SOUTH">                    <option>Atlanta Falcons</option>                    <option>Carolina Panthers</option>                    <option>New Orleans Saints</option>                    <option>Tampa Bay Buccaneers</option>                </optgroup>                <optgroup label="NFC WEST">                    <option>Arizona Cardinals</option>                    <option>St. Louis Rams</option>                    <option>San Francisco 49ers</option>                    <option>Seattle Seahawks</option>                </optgroup>                <optgroup label="AFC EAST">                    <option>Buffalo Bills</option>                    <option>Miami Dolphins</option>                    <option>New England Patriots</option>                    <option>New York Jets</option>                </optgroup>                <optgroup label="AFC NORTH">                    <option>Baltimore Ravens</option>                    <option>Cincinnati Bengals</option>                    <option>Cleveland Browns</option>                    <option>Pittsburgh Steelers</option>                </optgroup>                <optgroup label="AFC SOUTH">                    <option>Houston Texans</option>                    <option>Indianapolis Colts</option>                    <option>Jacksonville Jaguars</option>                    <option>Tennessee Titans</option>                </optgroup>                <optgroup label="AFC WEST">                    <option>Denver Broncos</option>                    <option>Kansas City Chiefs</option>                    <option>Oakland Raiders</option>                    <option>San Diego Chargers</option>                </optgroup>            </select>        </div>    </div></div><div class="control-group">    <label class="control-label">Loading Data</label>    <div class="controls">        <div class="select2-wrapper">            <input type="hidden" class="span12 select2_sample2">        </div>    </div></div><div class="control-group">    <label class="control-label">Tags Support List</label>    <div class="controls">        <div class="select2-wrapper">            <input type="hidden" class="span12 select2_sample3" value="red, blue">        </div>    </div></div><div class="control-group">    <label class="control-label">Membership</label>    <div class="controls">        <label class="radio">            <input type="radio" name="optionsRadios2" value="option1"/>            Free        </label>        <label class="radio">            <input type="radio" name="optionsRadios2" value="option2" checked/>            Professional        </label>    </div></div><div class="control-group">    <label class="control-label">Street</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">City</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">State</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">Post Code</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group last">    <label class="control-label">Country</label>    <div class="controls">        <select class="m-wrap span12"></select>    </div></div><div class="form-actions">    <button type="submit" class="btn blue"><i class="icon-ok"></i> Save</button>    <button type="button" class="btn">Cancel</button></div></form><!-- END FORM--></div></div></div><div class="tab-pane" id="tab_7"><div class="portlet box blue "><div class="portlet-title">    <div class="caption"><i class="icon-reorder"></i>Form Sample</div>    <div class="tools">        <a href="javascript:;" class="collapse"></a>        <a href="#portlet-config" data-toggle="modal" class="config"></a>        <a href="javascript:;" class="reload"></a>        <a href="javascript:;" class="remove"></a>    </div></div><div class="portlet-body form"><!-- BEGIN FORM--><form action="#" class="form-horizontal form-bordered form-label-stripped"><div class="control-group">    <label class="control-label">First Name</label>    <div class="controls">        <input type="text" placeholder="small" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Last Name</label>    <div class="controls">        <input type="text" placeholder="medium" class="m-wrap span12"/>        <span class="help-inline">This is inline help</span>    </div></div><div class="control-group">    <label class="control-label">Gender</label>    <div class="controls">        <select class="m-wrap span12">            <option value="">Male</option>            <option value="">Female</option>        </select>        <span class="help-block">Select your gender.</span>    </div></div><div class="control-group">    <label class="control-label">Date of Birth</label>    <div class="controls">        <input type="text" class="m-wrap span12" placeholder="dd/mm/yyyy">    </div></div><div class="control-group">    <label class="control-label">Category</label>    <div class="controls">        <div class="select2-wrapper">            <select class="span12 select2_category">                <option value=""></option>                <option value="Category 1">Category 1</option>                <option value="Category 2">Category 2</option>                <option value="Category 3">Category 5</option>                <option value="Category 4">Category 4</option>            </select>        </div>    </div></div><div class="control-group">    <label class="control-label">Multi-Value Select</label>    <div class="controls">        <div class="select2-wrapper">            <select class="span12 select2_sample1" multiple>                <option value=""></option>                <optgroup label="NFC EAST">                    <option>Dallas Cowboys</option>                    <option>New York Giants</option>                    <option>Philadelphia Eagles</option>                    <option>Washington Redskins</option>                </optgroup>                <optgroup label="NFC NORTH">                    <option>Chicago Bears</option>                    <option>Detroit Lions</option>                    <option>Green Bay Packers</option>                    <option>Minnesota Vikings</option>                </optgroup>                <optgroup label="NFC SOUTH">                    <option>Atlanta Falcons</option>                    <option>Carolina Panthers</option>                    <option>New Orleans Saints</option>                    <option>Tampa Bay Buccaneers</option>                </optgroup>                <optgroup label="NFC WEST">                    <option>Arizona Cardinals</option>                    <option>St. Louis Rams</option>                    <option>San Francisco 49ers</option>                    <option>Seattle Seahawks</option>                </optgroup>                <optgroup label="AFC EAST">                    <option>Buffalo Bills</option>                    <option>Miami Dolphins</option>                    <option>New England Patriots</option>                    <option>New York Jets</option>                </optgroup>                <optgroup label="AFC NORTH">                    <option>Baltimore Ravens</option>                    <option>Cincinnati Bengals</option>                    <option>Cleveland Browns</option>                    <option>Pittsburgh Steelers</option>                </optgroup>                <optgroup label="AFC SOUTH">                    <option>Houston Texans</option>                    <option>Indianapolis Colts</option>                    <option>Jacksonville Jaguars</option>                    <option>Tennessee Titans</option>                </optgroup>                <optgroup label="AFC WEST">                    <option>Denver Broncos</option>                    <option>Kansas City Chiefs</option>                    <option>Oakland Raiders</option>                    <option>San Diego Chargers</option>                </optgroup>            </select>        </div>    </div></div><div class="control-group">    <label class="control-label">Loading Data</label>    <div class="controls">        <div class="select2-wrapper">            <input type="hidden" class="span12 select2_sample2">        </div>    </div></div><div class="control-group">    <label class="control-label">Tags Support List</label>    <div class="controls">        <div class="select2-wrapper">            <input type="hidden" class="span12 select2_sample3" value="red, blue">        </div>    </div></div><div class="control-group">    <label class="control-label">Membership</label>    <div class="controls">        <label class="radio">            <input type="radio" name="optionsRadios2" value="option1"/>            Free        </label>        <label class="radio">            <input type="radio" name="optionsRadios2" value="option2" checked/>            Professional        </label>    </div></div><div class="control-group">    <label class="control-label">Street</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">City</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">State</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group">    <label class="control-label">Post Code</label>    <div class="controls">        <input type="text" class="m-wrap span12">    </div></div><div class="control-group last">    <label class="control-label">Country</label>    <div class="controls">        <select class="m-wrap span12"></select>    </div></div><div class="form-actions">    <button type="submit" class="btn blue"><i class="icon-ok"></i> Save</button>    <button type="button" class="btn">Cancel</button></div></form><!-- END FORM--></div></div></div></div></div></div></div><!-- END PAGE CONTENT--></div><!-- END PAGE CONTAINER--></div><!-- END PAGE --></div><!-- END CONTAINER --><!-- BEGIN FOOTER --><div class="footer">    <div class="footer-inner">        2013 &copy; Metronic by keenthemes.    </div>    <div class="footer-tools">			<span class="go-top">			<i class="icon-angle-up"></i>			</span>    </div></div><!-- END FOOTER --><!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --><!-- BEGIN CORE PLUGINS --><script src="media/js/jquery-1.10.1.min.js" type="text/javascript"></script><script src="media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script><!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --><script src="media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script><script src="media/js/bootstrap.min.js" type="text/javascript"></script><!--[if lt IE 9]><script src="media/js/excanvas.min.js"></script><script src="media/js/respond.min.js"></script><![endif]--><script src="media/js/jquery.slimscroll.min.js" type="text/javascript"></script><script src="media/js/jquery.blockui.min.js" type="text/javascript"></script><script src="media/js/jquery.cookie.min.js" type="text/javascript"></script><script src="media/js/jquery.uniform.min.js" type="text/javascript"></script><!-- END CORE PLUGINS --><!-- BEGIN PAGE LEVEL PLUGINS --><script type="text/javascript" src="media/js/select2.min.js"></script><!-- END PAGE LEVEL PLUGINS --><!-- BEGIN PAGE LEVEL SCRIPTS --><script src="media/js/app.js"></script><script src="media/js/form-samples.js"></script><!-- END PAGE LEVEL SCRIPTS --><script>    jQuery(document).ready(function () {        // initiate layout and plugins        App.init();        FormSamples.init();    });</script><!-- END JAVASCRIPTS --></body><!-- END BODY --></html>